<template>
  <div class="about" style="padding: 20px 0;">
    <config-table :data="list" v-bind="config" />
  </div>
</template>

<script>
import ConfigTable from '@/components/jsx/Table'
export default {
  components: {
    ConfigTable
  },
  data() {
    return {
      list: [
        { name: '一楼大会议室', a: 0.5 },
        { name: '一楼小议室', b: 0.6 },
        { name: '会议室c', c: 0.7 },
        { name: '会议室d', d: 0.8 },
        { name: '会议室e', e: 0.6 },
        { name: '会议室f', f: 0.7 },
      ],
      config: {
        border: true,
        // showHeader: false,
        // height: 600,
        columns: [
          { label: '项目名称', prop: 'name', align: 'center', fixed: 'left', width: 180 },
          {
            label: '星期一',
            prop: 'a',
            align: 'center',
            width: 300,
            render(h, { row }) {
              if (row.a) {
                return <el-progress percentage={row.a * 100} show-text={false} />
              }
            }
          },
          {
            label: '星期二',
            prop: 'b',
            align: 'center',
            width: 300,
            render(h, { row }) {
              if (row.b) {
                const change = e => row.b = e
                return (
                  <div>
                    <el-input size="mini" value={row.b} onInput={change} />
                  </div>
                )
              }
            }
          },
          {
            label: '星期三',
            prop: 'c',
            align: 'center',
            width: 300,
            render(h, { row }) {
              if (row.c) {
                return <el-progress percentage={row.c * 100} />
              }
            }
          },
          {
            label: '星期四',
            prop: 'd',
            align: 'center',
            width: 300,
            render(h, { row }) {
              if (row.d) {
                return <el-progress percentage={row.d * 100} />
              }
            }
          },
          {
            label: '星期五',
            prop: 'e',
            align: 'center',
            width: 300,
            render(h, { row }) {
              if (row.e) {
                return <el-progress percentage={row.e * 100} />
              }
            }
          },
          {
            label: '星期六',
            prop: 'f',
            align: 'center',
            width: 300,
            render(h, { row }) {
              if (row.f) {
                return <el-progress percentage={row.f * 100} />
              }
            }
          },
          {
            label: '星期日',
            prop: 'g',
            align: 'center',
            width: 300,
            render(h, { row }) {
              if (row.g) {
                return <el-progress percentage={row.g * 100} />
              }
            }
          },
        ]
      },
    }
  }
}
</script>
